ant design使用upload组件实现上传大文件时显示进度条进度 |
您所在的位置：网站首页 › Vueantdesign 文件上传 › ant design使用upload组件实现上传大文件时显示进度条进度 |
|
ant design使用upload组件实现上传大文件时显示进度条进度
发布时间：2020-10-31 00:42:40
来源：亿速云
阅读：2350
作者：Leah
栏目：开发技术
ant design使用upload组件实现上传大文件时显示进度条进度？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 首先页面要引入组件 Upload， Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭自带的列表 beforeUpload: (info) => { /* 上传前的钩子，可以用来判断类型，和大小 if ('是否符合类型') { return false } if ('是否符合类型') { return false } return true */ }， onChange: (info) => { console.log(info) /* 回调有三个参数 { file: { ... }, fileList: [ ... ], event: { ... } } */ } } 添加进度条我们需要回调里的 event， const event = info.event if (event) { // 一定要加判断，不然会报错 let percent = Math.floor((event.loaded / event.total) * 100) this.setState({percent: percent}) console.log(percent) // percent就是进度条的数值 }进度条组件： 补充知识：ant design (antd) Upload 点击上传图片反应过慢 每次点击上传的时候，要等半年，才能出来选择文件框，有的时候，还会出来俩次，比较恶心，其实是电脑去本地搜索文件啥的，过滤的时间 const props = { action: this.state.action, fileList: fileList, data: { appid: appid, secret: secret, }, headers: {'X-Requested-With': null}, // accept: "image/*", accept: "image/jpg,image/jpeg,image/png,image/bmp", onChange: this.handleChange, beforeUpload: this.beforeUpload, onPreview: this.handlePreview, listType: "picture-card", }; {fileList.length >= this.state.length ? null : uploadButton}关于ant design使用upload组件实现上传大文件时显示进度条进度问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。 推荐阅读： ant-design-vue 快速避坑指南(推荐) Android实现Ant Design 自定义表单组件免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 ant design upload 上一篇新闻：Mac系统下用Apache和PHP安装Xdebug的方法 下一篇新闻：PHP单例模式的案例分析 猜你喜欢 Web前端开发应该先学哪些内容？ idea中如何配置springboot热重启？ 从 0 使用 SpringBoot打造企业级 RESTful API 项目实战 推荐几个最新的腾讯URL短网址以及新浪TCN短连接的API接口 如何在Elasticsearch中离线安装IK分词器？ Tomcat学习笔记 学习Web前端需要注意什么？ Web前端开发学习建议 Elasticsearch如何进行词语扩展引入？ 如何把词库中没有的词语加进扩展词典中？ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |